import "./BookItemCard.scss";
import {ReactComponent} from "../../class/ReactComponent";
import {TableBookList} from "../../../common/class/TableBookList";
import React from "react";
import {getNextUpdateTime} from "../../func/bookFunc";
import moment from "moment";
import {generatePath} from "react-router";
import {Link} from "react-router-dom";
export namespace BookItemCard {
    export interface Props extends ReactComponent.Props {
        bookItem: TableBookList.Data;
    }
    export interface State extends ReactComponent.State {
    }
}

export class BookItemCard extends ReactComponent<BookItemCard.Props, BookItemCard.State> {
    public render() {
        const bookInfo = this.props.bookItem;
        return (<div className={this.getClsName("clickable book-item-card-component")} title={bookInfo.name}>
            <Link to={"/read/articles/" + bookInfo.id}>
                <div className="cover">
                    {this.getBadge()}
                    <img src={bookInfo.cover} alt={bookInfo.name + ":" + bookInfo.cover}/>
                </div>
                <div className="name">{bookInfo.name}</div>
            </Link>
        </div>);
    }
    protected getNextUpdateTime(): number {
        return getNextUpdateTime(this.props.bookItem);
    }
    protected getBadge() {
        const nextUpdateTime = this.getNextUpdateTime();
        if (
            nextUpdateTime &&
            (moment(nextUpdateTime).startOf("day").valueOf() < moment().startOf("day").valueOf())
        ) {
            return (<div className="ant-badge ant-badge-not-a-wrapper">
                <span className="ant-scroll-number ant-badge-count ant-badge-multiple-words">今日有更新</span>
            </div>);
        }
        return null;
    }
}
